<template>
	<div>
		<div 
			class="ticket-group" 
			v-for="(group,item) of data"
			:key="item"
		>
			<div class="ticket-group-top">
				<span class="ticket-group-icon"></span>
				<h3>{{ group.title }}</h3>
			</div>
			<div 
				class="ticket-list"
				v-for="(list,item) of group.list"
				:key="'list' + item"
			>
				<div class="ticket-list-info">
					<h5 class="ticket-list-name">{{ list.listName }}</h5>
					<div class="ticket-list-price">
						¥
						<em class="price-num">{{ list.price }}</em>
						<span class="ticket-numword">起</span>
					</div>
					<span class="ticket-list-extend iconfont icon-back"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'DetailList',
		props: {
			data: Array
		}
	}
</script>

<style lang="stylus" scoped>
.ticket-group
	position: relative;
	margin-top: .2rem;
	margin-bottom: .2rem;
	background: #fff;
	.ticket-group-top
		position: relative;
		height: .88rem;
		text-indent: .4rem;
		padding: 0 .2rem;
		font-size: .32rem;
		line-height: .88rem;
		background-color: #fff;
		border-top: 1px solid #e0e0e0;
		.ticket-group-icon
			position: absolute;
			top: .3rem;
			left: .2rem;
			width: .36rem;
			height: .36rem;
			background: url('~@/assets/images/detail.png') 0 -.4rem no-repeat;
			background-size: 100% auto;
	.ticket-list
		position: relative;
		z-index: 1;
		margin-bottom: -.02rem;
		background: #fff;
		border-top: 1px solid #e0e0e0;
		.ticket-list-info
			position: relative;
			z-index: 1;
			margin-bottom: -.02rem;
			padding: .24rem .2rem;
			background: #fff;
			.ticket-list-name
				margin-right: 1.8rem;
				color: #333;
				font-size: .3rem;
				line-height: .48rem;
			.ticket-list-price
				right: .55rem;
				margin-top: -.28rem;
				color: #ff9800;
				font-size: .24rem;
				.price-num
					margin-left: .04rem;
					font-size: .4rem;
				.ticket-numword
					display: inline-block;
					color: #9e9e9e;
					font-size: .24rem;
			.ticket-list-extend
				right: .2rem;
				top: 25%;
				transform: rotate(-90deg);
.ticket-list-price,
.ticket-list-extend 
	overflow: hidden;
	position: absolute;
	top: 50%;
	height: .4rem;
	line-height: .4rem;
</style>